<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>管理员端 - 全校信件统计</title>
  <link rel="stylesheet" href="../css/style.css">
  <style>
    .stats-card {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      margin-bottom: 20px;
    }
    .stat-item {
      flex: 1;
      min-width: 200px;
      background-color: #f5f7fa;
      padding: 20px;
      border-radius: 8px;
      text-align: center;
    }
    .stat-value {
      font-size: 24px;
      font-weight: bold;
      margin: 10px 0;
    }
    .chart-container {
      background-color: #fff;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 0 10px rgba(0,0,0,0.05);
      margin-bottom: 20px;
    }
    .chart-container canvas {
      width: 100% !important;
      height: auto !important;
    }
  </style>
  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
</head>
<body>
<div class="nav">
  <a href="letter_stat.html">全校信件统计</a>
  <a href="member_manage.html">成员管理</a>
  <a href="../index.html">退出登录</a>
</div>

<div class="container">
  <h3>全校信件统计</h3>

  <div class="card">
    <div class="stats-card">
      <div class="stat-item">
        <p>本月发送信件</p>
        <div class="stat-value">150</div>
        <p>较上月 <span style="color: #28a745;">+12%</span></p>
      </div>
      <div class="stat-item">
        <p>已读信件</p>
        <div class="stat-value">128</div>
        <p>已读率 <span style="color: #28a745;">85%</span></p>
      </div>
      <div class="stat-item">
        <p>未读信件</p>
        <div class="stat-value">22</div>
        <p>较上周 <span style="color: #dc3545;">-5%</span></p>
      </div>
      <div class="stat-item">
        <p>平均响应时间</p>
        <div class="stat-value">1.5天</div>
        <p>较上月 <span style="color: #28a745;">-0.5天</span></p>
      </div>
    </div>

    <div class="chart-container">
      <h4>信件发送趋势（近6个月）</h4>
      <canvas id="letterTrend"></canvas>
    </div>

    <div class="chart-container">
      <h4>各年级信件分布</h4>
      <canvas id="gradeDistribution"></canvas>
    </div>
  </div>
</div>

<script>
  // 初始化图表
  document.addEventListener('DOMContentLoaded', function() {
    // 信件发送趋势图表
    const trendCtx = document.getElementById('letterTrend').getContext('2d');
    new Chart(trendCtx, {
      type: 'line',
      data: {
        labels: ['1月', '2月', '3月', '4月', '5月', '6月'],
        datasets: [{
          label: '发送信件数量',
          data: [120, 135, 110, 140, 130, 150],
          borderColor: '#007bff',
          backgroundColor: 'rgba(0, 123, 255, 0.1)',
          tension: 0.3,
          fill: true
        }]
      },
      options: {
        responsive: true,
        plugins: {
          legend: {
            position: 'top',
          }
        }
      }
    });

    // 各年级信件分布图表
    const gradeCtx = document.getElementById('gradeDistribution').getContext('2d');
    new Chart(gradeCtx, {
      type: 'pie',
      data: {
        labels: ['高一', '高二', '高三'],
        datasets: [{
          data: [50, 45, 55],
          backgroundColor: ['#007bff', '#28a745', '#ffc107']
        }]
      },
      options: {
        responsive: true,
        plugins: {
          legend: {
            position: 'right',
          }
        }
      }
    });
  });
</script>
</body>
</html>
